﻿@using System.Web.UI.HtmlControls
@{
    ViewBag.Title = "Admin Control";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}




    
        <div class="row">
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="elipsis">
                            <strong>Bot 1</strong>
                        </span>
                    </div>
                    <div class="panel-body">
                        <canvas class="chartjs" id="bot1Chart" style="width: 100%; height: 300px;"></canvas>
                    </div>
                </div>
            </div>
            @*<div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="elipsis">
                            <strong>Bot 2</strong>
                        </span>
                    </div>
                    <div class="panel-body">
                        <canvas class="chartjs" id="bot2Chart" style="width: 100%; height: 300px;"></canvas>
                    </div>
                </div>
            </div>*@
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="elipsis">
                            <strong>Beta Bot</strong>
                        </span>
                    </div>
                    <div class="panel-body">
                        <canvas class="chartjs" id="betaBotChart" style="width: 100%; height: 300px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    

<div class="row">

    <div class="col-md-12">

        <!--
            PANEL CLASSES:
                panel-default
                panel-danger
                panel-warning
                panel-info
                panel-success

            INFO: 	panel collapse - stored on user localStorage (handled by app.js _panels() function).
                    All pannels should have an unique ID or the panel collapse status will not be stored!
        -->
        <div id="panel-2" class="panel panel-default">
            <div class="panel-heading">
                <span class="title elipsis">
                    <strong>NODE LIST</strong> <!-- panel title -->
                </span>

                <!-- tabs nav -->
                <ul class="nav nav-tabs pull-right">
                    <li class="active">
                        
                        <a href="#ttab1_nobg" data-toggle="tab" aria-expanded="true">Bot 1</a>
                    </li>
                    @*<li class="">
                        
                        <a href="#ttab2_nobg" data-toggle="tab" aria-expanded="false">Bot 2</a>
                    </li>*@
                    <li class="">
                        
                        <a href="#ttab3_nobg" data-toggle="tab" aria-expanded="false">Beta Bot</a>
                    </li>
                </ul>
                <!-- /tabs nav -->


            </div>

            <!-- panel content -->
            <div class="panel-body">

                <!-- tabs content -->
                <div class="tab-content transparent">

                    <div id="ttab1_nobg" class="tab-pane active">
                        <!-- TAB 1 CONTENT -->

                        <div class="table-responsive">
                            <table class="table table-striped table-hover table-bordered" id="bot1NodeTable">
                                <thead>
                                    <tr>
                                        <th>Node Id</th>
                                        <th>Games</th>
                                        <th>Version</th>
                                        <th>Shutting Down</th>
                                        <th>Uptime</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>

                            <a class="size-12" href="#">
                                <i class="fa fa-arrow-right text-muted"></i>
                                Stuff
                            </a>

                        </div>

                    </div><!-- /TAB 1 CONTENT -->

                    @*<div id="ttab2_nobg" class="tab-pane">
                        <!-- TAB 2 CONTENT -->

                        <div class="table-responsive">
                            <table class="table table-striped table-hover table-bordered" id="bot2NodeTable">
                                <thead>
                                    <tr>
                                        <th>Node Id</th>
                                        <th>Games</th>
                                        <th>Version</th>
                                        <th>Shutting Down</th>
                                        <th>Uptime</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>

                            <a class="size-12" href="#">
                                <i class="fa fa-arrow-right text-muted"></i>
                                Stuff
                            </a>

                        </div>

                    </div><!-- /TAB 1 CONTENT -->*@

                    <div id="ttab3_nobg" class="tab-pane">
                        <!-- TAB 1 CONTENT -->

                        <div class="table-responsive">
                            <table class="table table-striped table-hover table-bordered" id="betaBotNodeTable">
                                <thead>
                                    <tr>
                                        <th>Node Id</th>
                                        <th>Games</th>
                                        <th>Version</th>
                                        <th>Shutting Down</th>
                                        <th>Uptime</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>

                            <a class="size-12" href="#">
                                <i class="fa fa-arrow-right text-muted"></i>
                                Stuff
                            </a>

                        </div>

                    </div><!-- /TAB 1 CONTENT -->

                </div>
                <!-- /tabs content -->

            </div>
            <!-- /panel content -->

        </div>
        <!-- /PANEL -->

    </div>

    

</div>



<script>



    count = 30;
    updateData = function () {

        count++;


        $.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            url: '/AdminApi/GetStatus/',
            error: function (error) {

            },
            success: function (d) {
                $.each(d,
                    function (i, v) {
                        switch (i) {
                            case 0:
                                var labels = betaBotData["labels"];
                                var dataSetA = betaBotData["datasets"][0]["data"];
                                var dataSetB = betaBotData["datasets"][1]["data"];
                                var dataSetC = betaBotData["datasets"][2]["data"];
                                labels.push(count.toString());
                                labels.shift();
                                var newDataA = v.MessagesPerSecondIn;
                                var newDataB = v.MessagesPerSecondOut;
                                var newDataC = v.MessagesProcPerSecond;
                                dataSetA.push(newDataA);
                                dataSetB.push(newDataB);
                                dataSetC.push(newDataC);
                                dataSetA.shift();
                                dataSetB.shift();
                                dataSetC.shift();

                                //update table
                                $("#betaBotNodeTable tbody tr").remove();
                                $.each(v.Nodes,
                                    function(index, value) {
                                        addRow($('#betaBotNodeTable'), value.ClientId, value.CurrentGames, value.Version, value.ShuttingDown, value.Uptime, v.IP, v.Port);
                                    });
                                break;
                            case 1:
                                var labels = bot1Data["labels"];
                                var dataSetA = bot1Data["datasets"][0]["data"];
                                var dataSetB = bot1Data["datasets"][1]["data"];
                                var dataSetC = bot1Data["datasets"][2]["data"];
                                labels.push(count.toString());
                                labels.shift();
                                var newDataA = v.MessagesPerSecondIn;
                                var newDataB = v.MessagesPerSecondOut;
                                var newDataC = v.MessagesProcPerSecond;
                                dataSetA.push(newDataA);
                                dataSetB.push(newDataB);
                                dataSetC.push(newDataC);
                                dataSetA.shift();
                                dataSetB.shift();
                                dataSetC.shift();

                                //update table
                                $("#bot1NodeTable tbody tr").remove();
                                $.each(v.Nodes,
                                    function (index, value) {
                                        addRow($('#bot1NodeTable'), value.ClientId, value.CurrentGames, value.Version, value.ShuttingDown, value.Uptime, v.IP, v.Port);
                                    });
                                break;
                            case 2:
                                var labels = bot2Data["labels"];
                                var dataSetA = bot2Data["datasets"][0]["data"];
                                var dataSetB = bot2Data["datasets"][1]["data"];
                                var dataSetC = bot2Data["datasets"][2]["data"];
                                labels.push(count.toString());
                                labels.shift();
                                var newDataA = v.MessagesPerSecondIn;
                                var newDataB = v.MessagesPerSecondOut;
                                var newDataC = v.MessagesProcPerSecond;
                                dataSetA.push(newDataA);
                                dataSetB.push(newDataB);
                                dataSetC.push(newDataC);
                                dataSetA.shift();
                                dataSetB.shift();
                                dataSetC.shift();

                                //update table
                                $("#bot2NodeTable tbody tr").remove();
                                $.each(v.Nodes,
                                   function (index, value) {
                                       addRow($('#bot2NodeTable'), value.ClientId, value.CurrentGames, value.Version, value.ShuttingDown, value.Uptime, v.IP, v.Port);
                                   });
                                break;
                        };




                    });


            }
        });
    };

    optionsNoAnimation = { animation: false };

    bot1Data = {
        labels: [
            "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1",
            "2", "3", "4", "5", "6", "7", "8", "9", "10"
        ],
        datasets: [
            {
                label: "Msgs Rx / Sec",
                backgroundColor: "rgba(15, 15, 228,0.2)",
                strokeColor: "rgba(15, 15, 228,1)",
                pointColor: "rgba(15, 15, 228,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                label: "Msgs Tx / Sec",
                backgroundColor: "rgba(228, 228, 15,0.2)",
                strokeColor: "rgba(228, 228, 15,1)",
                pointColor: "rgba(228, 228, 15,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                label: "Msgs Proc / Sec",
                backgroundColor: "rgba(122, 228, 15,0.2)",
                strokeColor: "rgba(122, 228, 15,1)",
                pointColor: "rgba(122, 228, 15,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
        ]
    };

    //bot2Data = {
    //    labels: [
    //        "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1",
    //        "2", "3", "4", "5", "6", "7", "8", "9", "10"
    //    ],
    //    datasets: [
    //        {
    //            label: "Msgs Rx / Sec",
    //            backgroundColor: "rgba(15, 15, 228,0.2)",
    //            strokeColor: "rgba(15, 15, 228,1)",
    //            pointColor: "rgba(15, 15, 228,1)",
    //            pointStrokeColor: "#fff",
    //            pointHighlightFill: "#fff",
    //            pointHighlightStroke: "rgba(220,220,220,1)",
    //            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    //        },
    //        {
    //            label: "Msgs Tx / Sec",
    //            backgroundColor: "rgba(228, 228, 15,0.2)",
    //            strokeColor: "rgba(228, 228, 15,1)",
    //            pointColor: "rgba(228, 228, 15,1)",
    //            pointStrokeColor: "#fff",
    //            pointHighlightFill: "#fff",
    //            pointHighlightStroke: "rgba(151,187,205,1)",
    //            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    //        },
    //        {
    //            label: "Msgs Proc / Sec",
    //            backgroundColor: "rgba(122, 228, 15,0.2)",
    //            strokeColor: "rgba(122, 228, 15,1)",
    //            pointColor: "rgba(122, 228, 15,1)",
    //            pointStrokeColor: "#fff",
    //            pointHighlightFill: "#fff",
    //            pointHighlightStroke: "rgba(151,187,205,1)",
    //            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    //        }
    //    ]
    //};

    betaBotData = {
        labels: [
            "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "1",
            "2", "3", "4", "5", "6", "7", "8", "9", "10"
        ],
        datasets: [
            {
                label: "Msgs Rx / Sec",
                backgroundColor: "rgba(15, 15, 228,0.2)",
                strokeColor: "rgba(15, 15, 228,1)",
                pointColor: "rgba(15, 15, 228,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                label: "Msgs Tx / Sec",
                backgroundColor: "rgba(228, 228, 15,0.2)",
                strokeColor: "rgba(228, 228, 15,1)",
                pointColor: "rgba(228, 228, 15,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },
            {
                label: "Msgs Proc / Sec",
                backgroundColor: "rgba(122, 228, 15,0.2)",
                strokeColor: "rgba(122, 228, 15,1)",
                pointColor: "rgba(122, 228, 15,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
        ]
    };

    chart1Options = {
        type: 'line',
        data: bot1Data,
        options:
        {
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            scales:
            {
                xAxes: [
                    {
                        display: false
                    }
                ]
            }
        },
        animation: false
    };

    //chart2Options = {
    //    type: 'line',
    //    data: bot2Data,
    //    options:
    //    {
    //        legend: {
    //            display: true,
    //            labels: {
    //                fontColor: 'rgb(255, 99, 132)'
    //            }
    //        },
    //        scales:
    //        {
    //            xAxes: [
    //                {
    //                    display: false
    //                }
    //            ]
    //        }
    //    },
    //    animation: false
    //};

    chart3Options = {
        type: 'line',
        data: betaBotData,
        options:
        {
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            scales:
            {
                xAxes: [
                    {
                        display: false
                    }
                ]
            }
        },
        animation: false
    };



    loadChart = function () {
        updateData();
        bot1Chart.update(ctx1, chart1Options);
        //bot2Chart.update(ctx2, chart2Options);
        bot3Chart.update(ctx3, chart3Options);
    };

    stopNode = function (nodeid, ip, port) {
        
        $.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            data: { id: nodeid, ip: ip, port: port},
            url: '/AdminApi/StopNode/'
        });
    }

    addRow = function (table, nodeid, games, version, shutDown, uptime, ip, port) {
        var shuttingDown = '';
        console.log(shutDown);
        if (shutDown === true) {
            shuttingDown = '<i class="fa fa-times-circle" style="color: red;"></i>';
        }

        var body = table.find('tbody')
            .append($('<tr>')
                .append($('<td>').append(nodeid))
                .append($('<td>').append(games))
                .append($('<td>').append(version))
                .append($('<td>').append(shuttingDown))
                .append($('<td>').append(uptime))
                .append($('<td>')
                    .append("<a href='/AdminApi/Node?id=" +
                        nodeid +
                        "' class='btn btn-default btn-xs btn-block'>View</a>"))
                .append($('<td>')
                    .append("<button type='button' class='btn btn-danger btn-xs btn-block' onclick='stopNode(\"" + nodeid + "\", \"" + ip + "\"," + port +")'>Stop</button>")));
    }
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<script>
    $(document)
            .ready(function () {

                ctx1 = document.getElementById("bot1Chart").getContext("2d");
                bot1Chart = new Chart(ctx1, chart1Options);
                //ctx2 = document.getElementById("bot2Chart").getContext("2d");
                //bot2Chart = new Chart(ctx2, chart2Options);
                ctx3 = document.getElementById("betaBotChart").getContext("2d");
                bot3Chart = new Chart(ctx3, chart3Options);

                setInterval(loadChart, 1000);
            });
</script>